<template>
  <div class="wrapper">
    <div class="wrap">
      <div class="wrap-content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="手机号注册" name="first"> </el-tab-pane>
          <el-tab-pane label="邮箱注册" name="second"> </el-tab-pane>
        </el-tabs>
        <el-form
          ref="phoneForm"
          :model="phoneForm"
          label-width="1px"
          :rules="rules"
        >
          <template v-if="activeName == 'first'">
            <el-form-item label="" prop="phone">
              <el-input
                v-model="phoneForm.phone"
                placeholder="手机号码"
              ></el-input>
            </el-form-item>
          </template>
          <template v-if="activeName == 'second'">
            <el-form-item label="" prop="email">
              <el-input
                v-model="phoneForm.email"
                placeholder="邮箱地址"
              ></el-input>
            </el-form-item>
          </template>

          <el-form-item label="" prop="password">
            <el-input
              v-model="phoneForm.password"
              placeholder="密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="" prop="code">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-input
                  v-model="phoneForm.code"
                  placeholder="图片验证码"
                ></el-input>
              </el-col>
              <el-col :span="10">
                <identify
                  :identifyCode="identifyCode"
                  @click.native="refreshCode"
                />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox
              label="我已充分阅读、理解并接受个人信息保护政策的全部内容"
              name="type"
              v-model="isAgree"
            ></el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="onSubmit"
              :disabled="!isAgree"
              class="btn-lg"
              >确认</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Identify from "@/components/Identify.vue";
import {registerByPhone,registerByEmail} from '@/api/myApi'
export default {
  components: { Identify },
  data() {
    var validatePhone = (rule, value, callback) => {
      if (this.activeName == "first") {
        if (value === "") {
          callback(new Error("请输入手机号码"));
        } else {
          var reg_tel =
            /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
          if (!reg_tel.test(value)) {
            callback(new Error("手机号码格式不正确"));
          }
          callback();
        }
      }
    };
    var validateCode=(rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入验证码"));
        } else {
          if (value!=this.identifyCode) {
            callback(new Error("验证码不正确"));
          }
          callback();
        }
    };
    return {
      activeName: "first",
      isAgree: false,
      phoneForm: {
        phone: "",
        email: "",
        password: "",
        code: "",
      },
      identifyCodes: "1234567890",
      identifyCode: "",
      rules: {
        phone: [
          // {required:this.activeName=='first',trigger:'blur',message:'请输入手机号码'}
          { validator: validatePhone, trigger: "blur" },
        ],
        email: [
          {
            required: this.activeName == "second",
            message: "请输入邮箱地址",
            trigger: "blur",
          },
          { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur"] },
        ],
        password:[
            {required:true,trigger:'blur',message:'请输入密码'},
            {min:6,max:18,trigger:'blur',message:'请输入6-18位的密码'}
        ],
code:[
    {required:true,trigger:'blur',message:'请输入验证码'},
 { validator: validateCode, trigger: "blur" },

]
      },
    };
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.phoneForm.code = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode +=
          this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
      }
    },
    handleClick() {
      this.refreshCode();
      this.clearValidate();
      if (this.activeName == "first") {
        this.phoneForm.email = "";
      } else {
        this.phoneForm.phone = "";
      }
    },
    clearValidate() {
      this.$refs["phoneForm"].clearValidate();
    },
    onSubmit() {
      this.$refs["phoneForm"].validate((valid) => {
        if (valid) {
          if(this.activeName=='first'){
            this.phoneRegister()
          }
          else{
            this.emailRegister()
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    phoneRegister(){
      registerByPhone(this.phoneForm).then(response=>{
        if(response.data.code==200)
        {
           this.$message({
          message: '注册成功',
          type: 'success',
          duration:1000
          
        });
        this.$router.push('/login')
        }
        else{
          this.$message({
          message: response.data.message,
          type: 'danger',
          duration:5000
        });
        }
      }).catch(error=>{
        this.$message({
          message: error,
          type: 'danger',
          duration:5000
        });
      })
    },
    emailRegister(){
       registerByEmail(this.phoneForm).then(response=>{
        if(response.data.code==200)
        {
           this.$message({
          message: '注册成功',
          type: 'success',
          duration:1000
          
        });
        this.$router.push('/login')
        }
        else{
          this.$message({
          message: response.data.message,
          type: 'danger',
          duration:5000
        });
        }
      }).catch(error=>{
        this.$message({
          message: error,
          type: 'danger',
          duration:5000
        });
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: calc(100vh - 320px);
  background: url("../assets/images/login-01.jpg") no-repeat;
  background-size: 100% auto;
  &::after {
    clear: both;
    display: block;
    content: "";
    height: 0;
  }
  .wrap {
    position: absolute;
    width: 500px;
    background: #fff;
    top: 30px;
    right: 100px;
    min-height: 450px;
    .wrap-content {
      width: 400px;
      margin: 0 auto;
      margin-top: 50px;
    }
  }
}
</style>
